import { Table, Button, Modal, message } from 'antd';
import { EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table';
import React from 'react';
import * as api from '@/api/product'
import { useEffect, useState, useMemo, Fragment } from 'react'
import Dialog from '@/components/Dialog';


interface DataType {
    key: string;
    cImg?: string;
    cname?: string;
    cTime?: string;
    creater?: string;
    cId?: string
}

let title = ['类目图片', '类目id', '类目名称', '创建时间', '创建人']

// const columns: ColumnsType<DataType> = [
//     {
//         title: '类目图片',
//         dataIndex: 'cImg',
//         align: 'center',
//     },
//     {
//         title: '类目id',
//         className: 'column-money',
//         dataIndex: 'cId',
//         align: 'center',
//     },
//     {
//         title: '类目名称',
//         dataIndex: 'cname',
//         align: 'center',
//     },
//     {
//         title: '创建时间',
//         dataIndex: 'cTime',
//         align: 'center',
//     },
//     {
//         title: '创建人',
//         dataIndex: 'creator',
//         align: 'center',
//     },
//     {
//         title: '操作',
//         dataIndex: 'address',
//     },

// ];

const Category: React.FC = () => {
    ////声明表格数据状态
    let [category, setCategory] = useState([])

    ////声明 loading 状态
    let [loading, setLoading] = useState(true)

    ////声明 每页的数据数量
    let [defaultPageSize, setDefaultPageSize] = useState(6)

    ////声明 modal  状态
    const [isModalOpen, setIsModalOpen] = useState(false);

    ////声明当前点击的这行数据
    let [row, setRow] = useState({ cId: '' })

    ////声明  向Dialog 组件传参的开关
    let [editFlag,setEditFlag] = useState(true)


    let [editContent,setEditContent] = useState({})

    ////封装 获取页面product数据
    let getproduct = () => {
        api.getCategory()
            .then(res => {
                // console.log('res', res);
                if (res.data.state) {
                    setCategory(res.data.data.reverse())
                    setLoading(false)
                }
            })
    }

    ////封装  删除数据
    let del = (item: any) => {
        api.deleteCategory(item)
            .then(res => {
                console.log(res);
                if (res.data.state) {
                    getproduct()
                }
            })
    }

    //// 初始化页面时 调用
    useEffect(() => {
        getproduct()
    }, [])

    let dataSource = useMemo(() => {
        return category.map((item: any) => ({
            cImg: item.categoryImgurl,
            cId: item.category_id,
            cname: item.categoryName,
            cTime: item.createTime,
            creator: item.creator,
            key: item._id
        }))
    }, [category])




    let columns: any = useMemo(() => {
        let col: any = []
        try {
            ////拿到数据的key
            let keys = Object.keys(dataSource[0])
            // console.log('keys', keys);
            col = title.map((item, index) => {
                ////当属性是  cImg 的时候
                if (keys[index] === 'cImg') {
                    return {
                        title: item,
                        key: keys[index],
                        dataIndex: keys[index],
                        align: 'center',
                        ////渲染图片
                        render: (text: any) => {
                            // #ff0000  text 是每一格的数据，从第一行开始依次往下  record 是每一行的数据
                            // console.log('text', text);
                            // console.log('record',record);
                            return (
                                <img width={50} src={text ? text : 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'} alt="" />
                            )
                        }

                    }
                } else {
                    return {
                        title: item,
                        key: keys[index],
                        dataIndex: keys[index],
                        align: 'center',

                    }
                }
            })

            ////定义 按钮
            let ButtonObj: any = {
                title: '操作',
                key: 'operation',
                align: 'center',
                render: (text: any, record: any) => {
                    return (
                        <Fragment>
                            <Button type="primary" icon={<EyeOutlined />} >查看</Button>
                            <Button icon={<EditOutlined />} onClick={() => {
                                edit(record)
                            }} >编辑</Button>
                            <Button icon={<DeleteOutlined />} danger onClick={() => {
                                console.log(record);
                                showModal()
                                setRow(record)

                            }}>删除</Button>
                        </Fragment>
                    )
                }
            }
            col.push(ButtonObj)
            return col
        } catch (e) {
            console.log(e);
        }
    }, [category])

    // console.log('columns', columns);

    ////展示提示框
    const showModal = () => {
        setIsModalOpen(true);

    };

    ////确认的回调
    const handleOk = (id: any) => {
        // console.log('row',row);
        setIsModalOpen(false);
        message.success('删除成功')
        del(row.cId)

    };

    ////取消的回调
    const handleCancel = () => {
        setIsModalOpen(false);
        message.warning('取消删除')
    };



    let edit = (record: any) => {
        // console.log('record', record);
        setEditFlag(editFlag)
        setEditContent({record,editFlag})
    }

  


    return (
        <Fragment>
            <Dialog getproduct={getproduct} editContent={editContent} />
            <Modal title="是否确认删除!!!" open={isModalOpen} onOk={handleOk} cancelText='取消' okText='确认' onCancel={handleCancel}>
                <p>确认删除么傻狗</p>

            </Modal>
            <Table
                pagination={{ defaultPageSize }}
                columns={columns}
                dataSource={dataSource}
                bordered
                loading={loading}
            ////头部
            // title={() => 'Header'}
            ////尾部
            // footer={() => 'Footer'}
            />
        </Fragment>
    )
}

export default Category

